<template>
  <div class="material-example">
    <h1>素材库组件示例</h1>
    
    <div class="example-section">
      <h2>基础素材库</h2>
      <MaterialLibrary
        mode="session"
        :use-type="1"
        :material-a-p-i="materialAPI"
        :upload-handler="uploadHandler"
        :t="t"
        @material-added="handleMaterialAdded"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { MaterialLibrary, createMaterialAPI } from '../src/components/Material'

// 模拟请求函数
const mockRequest = (config: any) => {
  console.log('Mock API call:', config)
  return Promise.resolve({
    materials: [],
    materialGroups: [],
    totalCount: 0,
  })
}

// 创建素材API实例
const materialAPI = createMaterialAPI(mockRequest)

// 模拟上传处理函数
const uploadHandler = async (file: File, isPublic: boolean = true) => {
  console.log('Mock upload:', file.name, isPublic)
  // 模拟上传延迟
  await new Promise(resolve => setTimeout(resolve, 1000))
  return {
    key: `mock-${file.name}-${Date.now()}`,
    url: `https://example.com/uploads/${file.name}`,
  }
}

// 翻译函数
const t = (key: string) => {
  const translations: Record<string, string> = {
    'common.add': '添加',
    'common.delete': '删除',
    'common.text': '文本',
    'common.image': '图片',
    'common.video': '视频',
    'common.voice': '语音',
    'common.file': '文件',
    'common.link': '链接',
    'common.imageTextTemplate': '图文模板',
    'common.forwardHyperlink': '转发超链',
    'sticker': 'sticker',
    'gif': 'gif',
    'session.businessCard': '名片',
    'message.type.poll': '投票',
    'set.addMatertial': '添加素材',
    'set.groupName': '分组名称',
    'set.inputGroupName': '请输入分组名称',
    'common.selectPlaceholder': '请选择',
    'common.sureBtn': '确定',
    'common.cancel': '取消',
    'common.content': '内容',
    'common.handle': '操作',
    'common.refresh': '刷新',
    'common.openSearch': '打开搜索',
    'common.hiddenSearch': '隐藏搜索',
    'common.resetBtn': '重置',
    'common.sure': '确定',
    'common.notice': '提示',
    'common.handleSuccess': '操作成功',
    'common.handleError': '操作失败',
    'material.selectMaterialGroup': '请选择素材分组',
    'material.uploadMaterialFile': '请上传素材文件',
    'material.addSuccessAndRefresh': '添加成功，请刷新查看',
    'material.sureDelMaterial': '确定删除该素材吗？',
    'material.sureDelMaterialFolder': '确定删除该素材文件夹吗？',
    'material.file_size_limit_error': '文件 {fileName} 大小超过限制',
    'material.mediaFile': '媒体文件',
    'sup.materialT1': '只支持txt格式，一行一个内容',
    'sup.materialT3': '个文件，已上传',
    'sup.enterTitle': '请输入标题',
    'sup.enterContent': '请输入内容',
    'sup.attachedText': '附加文本',
    'session.cardName': '姓名',
    'session.cardDisplayName': '显示名称',
    'session.cardPhone': '电话',
    'session.enterContent': '请输入内容',
    'session.addPhoneNotice': '请添加电话号码',
    'poll.topic': '投票主题',
    'poll.options': '投票选项',
    'poll.enterTopic': '请输入投票主题',
    'poll.enterOption': '请输入选项',
    'poll.addOption': '添加选项',
    'poll.allowNumber': '可选数量',
    'poll.atLeastTwoOptions': '至少需要两个选项',
    'message.type.unknown': '未知类型',
  }
  return translations[key] || key
}

// 处理素材添加成功
const handleMaterialAdded = () => {
  ElMessage.success('素材添加成功！')
}
</script>

<style lang="scss" scoped>
.material-example {
  padding: 20px;
  height: 100vh;
  
  h1 {
    color: #303133;
    margin-bottom: 20px;
  }
  
  h2 {
    color: #606266;
    margin-bottom: 16px;
  }
  
  .example-section {
    height: calc(100vh - 120px);
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 16px;
  }
}
</style>